var currentPage;
var totalRecord;
// 页面加载完成以后，直接发送一个Ajax请求，要到分页数据
$(function() {
	// 去第一页
	to_page(1);
});
function to_page(pn) {
	$.ajax({
		url : "${APP_PATH}/emps",
		data : "pn=" + pn,
		type : "GET",
		success : function(result) {
			// console.log(result);
			// 1.解析并显示员工数据
			bulid_emps_table(result);
			// 2.解析并显示分页数据
			bulid_page_info(result);
			// 3.解析显示分页条数据
			build_page_nav(result);
		}
	});
}
function bulid_emps_table(result) {
	// 清空table表格
	$("#emps_table tbody").empty();
	var emps = result.extend.pageInfo.list;
	$
			.each(
					emps,
					function(index, item) {
						// alert(item.empName);
						var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td> ")
						var empIdTd = $("<td></td>").append(item.empId);
						var empNameTd = $("<td></td>").append(item.empName);
						// var gender = item.gender=='M'?"男":"女";
						var genderTd = $("<td></td>").append(
								item.gender == 'M' ? "男" : "女");
						var emailTd = $("<td></td>").append(item.email);
						var empDeptTd = $("<td></td>").append(
								item.department.deptName);

						var editBtn = $("<button></button>").addClass(
								"btn btn-primary btn-sm edit_btn").append(
								$("<span></span>").addClass(
										"glyphicon glyphicon-pencil")).append(
								"编辑");
						// 为编辑按钮添加一个自定义的属性，来表示当前员工的id
						editBtn.attr("edit-id", item.empId);
						var delBtn = $("<button></button>").addClass(
								"btn btn-danger btn-sm delete_btn").append(
								$("<span></span>").addClass(
										"glyphicon glyphicon-trash")).append(
								"删除");

						// 为删除按钮添加一个自定义属性，来表示当前员工的Id
						delBtn.attr("del-id", item.empId);
						var btnTd = $("<td></td>").append(editBtn).append(" ")
								.append(delBtn);

						// append方法执行完成以后还是返回原来的元素
						$("<tr></tr>").append(checkBoxTd).append(empIdTd)
								.append(empNameTd).append(genderTd).append(
										emailTd).append(empDeptTd)
								.append(btnTd).appendTo("#emps_table tbody");
					});
}
// 解析显示分页信息的
function bulid_page_info(result) {
	$("#page_info_area").empty();
	$("#page_info_area").append(
			"当前" + result.extend.pageInfo.pageNum + "页，总"
					+ result.extend.pageInfo.pages + "页,总"
					+ result.extend.pageInfo.total + "条记录");
	totalRecord = result.extend.pageInfo.total;
	currentPage = result.extend.pageInfo.pageNum;
}

// 解析显示分页条,点击分页能够显示数据
function build_page_nav(result) {
	$("#page_nav_area").empty();
	var ul = $("<ul></ul>").addClass("pagination");

	// 构建元素
	var firstPageLi = $("<li></li>").append(
			$("<a></a>").append("首页").attr("href", "#"));
	var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
	if (result.extend.pageInfo.hasPreviousPage == false) {
		firstPageLi.addClass("disabled");
		prePageLi.addClass("disabled");
	} else {
		// 为元素添加翻页的事件
		firstPageLi.click(function() {
			to_page(1);
		});
		prePageLi.click(function() {
			to_page(result.extend.pageInfo.pageNum - 1);
		});
	}

	var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
	var lastPageLi = $("<li></li>").append(
			$("<a></a>").append("末页").attr("href", "#"));
	if (result.extend.pageInfo.hasNextPage == false) {
		nextPageLi.addClass("disabled");
		lastPageLi.addClass("disabled");
	} else {
		nextPageLi.click(function() {
			to_page(result.extend.pageInfo.pageNum + 1);
		});
		lastPageLi.click(function() {
			to_page(result.extend.pageInfo.pages);
		});
	}

	ul.append(firstPageLi).append(prePageLi);
	// 添加首页和前一页的提示
	// 遍历页码号
	$.each(result.extend.pageInfo.navigatepageNums, function(index, item) {
		var numLi = $("<li></li>").append($("<a></a>").append(item));
		if (result.extend.pageInfo.pageNum == item) {
			numLi.addClass("active");
		}
		numLi.click(function() {
			to_page(item);
		});
		ul.append(numLi);
	});
	// 添加下一页和末页的提示
	ul.append(nextPageLi).append(lastPageLi);
	// 把ul加入nav中
	var navEle = $("<nav></nav>").append(ul);
	navEle.appendTo("#page_nav_area");

}
function reset_form(ele) {
	$(ele)[0].reset();
	$(ele).find("*").removeClass("has-error has-success");
	$(ele).find(".help-block").text("");
}

// 查出所有部门信息，显示在下拉列表中
function getDepts(ele) {
	$(ele).empty();
	$.ajax({
		url : "${APP_PATH}/depts",
		type : "GET",
		success : function(result) {
			// console.log(result);
			// $("#dept_add_select").addpend("")
			$.each(result.extend.depts, function() {
				var optionEle = $("<option ></option>").append(this.deptName)
						.attr("value", this.deptId);
				optionEle.appendTo(ele);
			});
		}
	})
}

// 点击新增按钮，弹出模态框
$("#emp_add_modal_btn").click(function() {
	// 表单完整重置
	// 表单重置
	reset_form("#empAddModal form");
	// $("#empAddModal form")[0].reset(); //jquery没有reset()方法，需要调用dom对象进行调换使用。
	// 发送ajax，查出部门信息，显示下拉列表
	getDepts("#dept_add_select");
	$("#empAddModal").modal({
		backdrop : "static"
	});

});
// 校验数据的可行性
function validate_add_form() {
	// 拿到要校验的数据，可以使用正则表达式
	var empName = $("#empName_add_input").val();
	var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	if (!regName.test(empName)) {
		show_validate_msg("#empName_add_input", "error",
				"用户名可以是2-5位中文或者6-16位的数字和英文组合");
		return false;
	} else {
		show_validate_msg("#empName_add_input", "success", "");

	}
	// 校验邮箱信息
	var email = $("#email_add_input").val();
	var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	if (!regEmail.test(email)) {
		show_validate_msg("#email_add_input", "error", "邮箱格式不对");
		return false;
	} else {
		show_validate_msg("#email_add_input", "success", "");
	}
	return true;
}

function show_validate_msg(ele, status, msg) {
	$(ele).parent().removeClass("has-success has-error");
	$(ele).next("span").text("");
	if ("success" == status) {
		$(ele).parent().addClass("has-success");
		$(ele).next("span").text(msg);
	} else if ("error" == status) {
		$(ele).parent().addClass("has-error");
		$(ele).next("span").text(msg);
	}
}

$("#empName_add_input").change(
		function() {
			// 发送ajax，校验用户名是否可用
			var empName = this.value;
			$.ajax({
				url : "${APP_PATH}/checkuser",
				type : "POST",
				data : "empName=" + empName,
				success : function(result) {
					if (result.code == 100) {
						show_validate_msg("#empName_add_input", "success", "");
						$("#emp_save_btn").attr("ajax-va", "success");
					} else {
						show_validate_msg("#empName_add_input", "error",
								result.extend.va_msg);
						$("#emp_save_btn").attr("ajax-va", "error");
					}
				}

			});
		})

$("#emp_save_btn").click(
		function() {
			// 将模态框中填写的数据交个服务进行保存
			// 需要对数据进行校验
			if (!validate_add_form()) {
				return false;
			}

			// 判断ajax的用户名校验是否成功了
			if ($(this).attr("ajax-va") == "error") {
				return false;
			}

			// 发送ajax保存员工
			// alert($("#empAddModal form").serialize());
			$.ajax({
				url : "${APP_PATH}/emp",
				type : "POST",
				data : $("#empAddModal form").serialize(),
				success : function(result) {
					// // alert(result.msg);
					if (result.code == 100) {
						// 员工保存成功，关闭模态框，来到最后一页，显示刚才保存的数据
						$("#empAddModal").modal('hide');
						to_page(totalRecord);
					} else {
						// 显示失败信息
						// console.log(result);
						// 有那个字段的错误信息就显示那个字段
						if (undefined != result.extend.errorFields.email) {
							// 显示邮箱的错误信息
							show_validate_msg("#email_add_input", "error",
									result.extend.errorFields.email);
						}
						if (undefined != result.extend.errorFields.empName) {
							// 显示与员工名字的错误信息
							show_validate_msg("#empName_add_input", "error",
									result.extend.errorFields.empName);
						}

					}
				}
			})
		})

// 1.我们是在创建之先绑定了click,所以绑定不上
// 解决方法：1可以在创建按钮的时候绑定事件
// 2.绑定点击live()
// 新版本已经没有live了，用on进行替代
$(document).on("click", ".edit_btn", function() {
	// alert("edit");

	// 1.查出部门信息，显示部门列表
	getDepts("#dept_update_select");
	// 查出员工信息，显示员工信息
	getEmp($(this).attr("edit-id"));
	// 3.把员工的id传给模态框的更新按钮
	$("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
	$("#empUpdateModal").modal({
		backdrop : "static"
	});
});

function getEmp(id) {
	$.ajax({
		url : "${APP_PATH}/emp/" + id,
		type : "GET",
		success : function(result) {
			// console.log(result);
			var empData = result.extend.emp;
			$("#empName_update_static").text(empData.empName);
			$("#email_update_input").val(empData.email);
			$("#empUpdateModal input[name=gender]").val([ empData.gender ]);
			$("#empUpdateModal select").val([ empData.dId ]);
		}
	})
}

// 点击更新，更新员工信息
$("#emp_update_btn").click(function() {
	// 校验邮箱信息
	var email = $("#email_update_input").val();
	var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	if (!regEmail.test(email)) {
		show_validate_msg("#email_update_input", "error", "邮箱格式不对");
		return false;
	} else {
		show_validate_msg("#email_update_input", "success", "");
	}
	// 发送ajax请求，保存员工数据
	$.ajax({
		url : "${APP_PATH}/emp/" + $(this).attr("edit-id"),
		// type:"POST",
		// data:$("#empUpdateModal form").serialize()+"&_method=PUT",
		type : "PUT",
		data : $("#empUpdateModal form").serialize(),
		success : function(result) {
			// alert(result.msg);
			if (result.code == 100) {
				// 员工保存成功，关闭模态框，来到当前一页，显示刚才保存的数据
				$("#empUpdateModal").modal('hide');
				to_page(currentPage);
			}
		}
	})
})
// 单个删除
$(document).on("click", ".delete_btn", function() {
	// 1.弹出时候确认删除对话框
	var empName = $(this).parents("tr").find("td:eq(2)").text();
	var empId = $(this).attr("del-id");
	// alert(empName);
	if (confirm("确认删除【" + empName + "】" + "吗")) {
		$.ajax({
			url : "${APP_PATH}/emp/" + empId,
			type : "DELETE",
			success : function(result) {
				if (result.code == 100) {
					// 员工删除成功，回到本页
					// alert(result.msg);
					to_page(currentPage);
				}

			}
		})
	}
});

// 完成全选/全不选
$("#check_all").click(function() {
	// attr获取checkd是undefined,attr用来获取自定义属性
	// /使用prop来读取dom原生属性
	// $(this).prop("checked");
	$(".check_item").prop("checked", $(this).prop("checked"));
});

// check_item
$(document).on("click", ".check_item", function() {
	// 判断当前选择的元素是否是五个
	var flag = $(".check_item:checked").length == $(".check_item").length;
	$("#check_all").prop("checked", flag);
	// $("#chekc_all")
})

// 点击全部删除，就批量删除
$("#emp_delete-all_btn").click(function() {
	// $(".check_item:checked")

	var empNames = "";

	var del_idstr = "";
	$.each($(".check_item:checked"), function() {
		empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
		// alert(empNames);
		// 组装员工id字符串
		del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
	});
	empNames = empNames.substring(0, empNames.length - 1);
	// 删除员工id多余的-
	del_idstr = del_idstr.substring(0, del_idstr.length - 1);
	if (confirm("确认删除【" + empNames + "】吗？")) {
		$.ajax({
			url : "${APP_PATH}/emp/" + del_idstr,
			type : "DELETE",
			success : function() {
				to_page(currentPage);
			}
		})
	}
})